<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="设备监控—电梯监控系统"></Header>

    <!--导航栏-->
    <div class="box-tit" data-v-6e92ad55="">
      <span data-v-6e92ad55="">主楼电梯监控系统</span>
    </div>

    <div class="container">
      <el-card class="card" v-for="o in 8" :key="o">
        <p class="text">{{ "主楼" + o + "#电梯" }}</p>
        <img src="../../../assets/img/monitor/elevator.png" />

        <div class="box">
          <p class="text">运行参数</p>
          <p>
            当前状态：<span>{{ form.a }}</span>
          </p>
          <p>
            故障状态：<span>{{ form.b }}</span>
          </p>
          <p>
            总有功电能：<span>{{ form.c }}</span>
          </p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import Header from '@/components/Header'

export default {
  components: {
    Header,
  },
  data() {
    return {
      form: {
        a: "上行",
        b: "待机",
        c: "下行",
      },
    };
  },
};
</script>

<style lang="less" scoped>
.bg {
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .search_bar {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
  }
}

.container {
  display: flex;
  flex-direction: row;
  .card {
    flex: 1;
    margin: 80px 15px;
    color: white;

    img {
      width: 100%;
    }
    .text {
      text-align: center;
      font-size: 20px;
      line-height: 50px;
    }
    p {
      line-height: 50px;
    }
    span {
      float: right;
    }
  }
}
.box-tit[data-v-6e92ad55] {
  height: 50px;
  line-height: 29px;
  width: 100%;
  font-size: 18px;
  color: #b8f9ff;
  padding-left: 39px;
  background: url()
    no-repeat;
  box-sizing: border-box;
  display: flex;
  margin-top: 50px;
}
.box-tit[data-v-6e92ad55] span {
  margin-right: 200px;
}
</style>
